<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/product/flexslider.css" />
		<link rel="stylesheet" type="text/css" href="css/product/revolution-slider.css" />
		<link rel="stylesheet" type="text/css" href="css/product/style.css" />
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>

		<style>
			body{
				background: white;
				
			}
			.el-carousel__indicators--horizontal{
				background: center;
			}
			.el-carousel__button {
				background-color: #009688;
			}
			ul{
				margin-left: 0rem;
				
			}
		</style>
	</head>
	<body>
		<!-- 产品分类及轮播图 -->
		<div style="width: 100%;height: auto;" class="divCenter" id="sort">
			<div style="width: 75rem;height: auto;" class="divRow">
				<!-- 分类 -->
				<ul style="width: 12.5rem;margin-left: -0.0625rem;" @mouseleave="leaveUl()">
					<li v-for="(item,index) in sortList" @mouseenter="enter(index)" @mouseleave="leave(index)">
						<div style="width: 100%;height: 2.375rem;" class="divRow divColumnCenter">
							<img src="img/home6.png" style="margin-left: 0.625rem;" />
							<div class="leftAndRight" style="width: 100%;margin-left: 0.625rem;">
								<span v-html="item.name"></span>
								<img src="img/right_bk.png" />
							</div>
						</div>
						<div style="width: 100%;height: 0.0625rem;background: #F0F0F0;"></div>
					</li>
				</ul>
				<div style="width: 62.5rem;height:30rem;position: relative;">
					<div style="width: 28.75rem;background: white;position: absolute;min-height:20rem;height: auto;padding: 0.75rem;z-index: 9999;"
					 v-if="isShow" @mouseleave="leaveSort()" @mouseenter="enterSort()">
						<div style="width: 5rem;height: 1.875rem;display: flex;float: left;" class="divCenter" v-for="(item,index) in secondSort">
							<a href="#" v-html="item"></a>
						</div>

					</div>
					<div style="width: 62.5rem;">
						<template>
							<div class="block">
								<el-carousel trigger="click" height="480px">
									<el-carousel-item v-for="item in 4" :key="item">
										<img src="img/home7.png" style="width: 100%;height: 100%;" />
									</el-carousel-item>
								</el-carousel>
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>
		<!-- 今日推荐 -->
		<div style="width: 100%;" class="divCenter">
			<div style="width: 75rem;margin-top: 0.5rem;" class="divRow">
				<div style="width: 12.5rem;height: 7.5rem;background: #73CD93;" class="divColumn divCenter">
					<h3 style="color: white;">今日推荐</h3>
					<div style="width: 10rem;height: 2rem;border: 0.0625rem solid white;margin-top: 0.625rem;" class="divCenter">
						<h3 style="color: white;">RECOM MENDED</h3>
					</div>
				</div>

				<div style="width: 62.5rem;height: 7.5rem;background: white;overflow: hidden;" class="box">
					<div style="width: 500%;" id="boxdiv">
						<ul style="float: left;">
							<li style="display: block;float: left;" title="红薯" v-for="(item,index) in itemList"><a href="goodDetails.html">
									<img :src="item" /></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 整体分类 -->
		<div style="width: 100%;height: auto;" class="divCenter">
			<div style="width: 75rem;height: 12.5rem;" class="divRow divColumnCenter">
				<div style="width: 16%;height: 100%;margin: 0rem 2%;" class="divColumn divCenter">
					<img src="https://img12.360buyimg.com/n7/jfs/t1/60256/28/3860/128083/5d206074E47066b02/d8ca2e200de76150.jpg" style="height:6.25rem;width:6.25rem;border-radius: 50%;" />
					<h3 style="margin-top: 0.625rem;color: #69B82D;">茶叶茶具</h3>
					<p style="font-size: 0.625rem;">茶可行道，可雅志</p>
				</div>
				<div style="width: 16%;height: 100%;margin: 0rem 2%;" class="divColumn divCenter">
					<img src="https://img10.360buyimg.com/n7/jfs/t1/84110/1/5969/143367/5d4137f4E677823eb/5952f23026187b66.jpg" style="height:6.25rem;width:6.25rem;border-radius: 50%;" />
					<h3 style="margin-top: 0.625rem;color: #69B82D;">酒庄酒业</h3>
					<p style="font-size: 0.625rem;">醇香正宗</p>
				</div>
				<div style="width: 16%;height: 100%;margin: 0rem 2%;" class="divColumn divCenter">
					<img src="https://img10.360buyimg.com/n7/jfs/t1/24866/31/1534/160302/5c131a1bEab37b47d/40919b9a94a6fd66.jpg" style="height:6.25rem;width:6.25rem;border-radius: 50%;" />
					<h3 style="margin-top: 0.625rem;color: #69B82D;">各地特产</h3>
					<p style="font-size: 0.625rem;">特别的味道</p>
				</div>
				<div style="width: 16%;height: 100%;margin: 0rem 2%;" class="divColumn divCenter">
					<img src="https://img12.360buyimg.com/n7/jfs/t1/36750/11/2489/451209/5cc01392Ef3e93e2d/282b38ec046912b3.jpg" style="height:6.25rem;width:6.25rem;border-radius: 50%;" />
					<h3 style="margin-top: 0.625rem;color: #69B82D;">大米油盐</h3>
					<p style="font-size: 0.625rem;">唯有美食不可辜负</p>
				</div>
				<div style="width: 16%;height: 100%;margin: 0rem 2%;" class="divColumn divCenter">
					<img src="https://img10.360buyimg.com/n7/jfs/t1/77461/25/1670/301016/5cff7b72E52011cc6/84b3511983ba47c2.jpg" style="height:6.25rem;width:6.25rem;border-radius: 50%;" />
					<h3 style="margin-top: 0.625rem;color: #69B82D;">特色干货</h3>
					<p style="font-size: 0.625rem;">简单的生活</p>
				</div>
			</div>
		</div>

		<!-- 第一层食品 -->
		<div style="width: 100%;" class="divCenter divColumn" id="floorGood">
			<div style="width: 75rem;height: 37.5rem;margin-top: 1.25rem;" class="divRow" v-for="(item,index) in floorList">
				<div style="width: 20rem;height: 100%;" class="divColumn">
					<div style="height: 60%;width: 100%;background: #BEF2FF;" class="divColumn">
						<h2 style="margin-left:1.875rem;margin-top: 1.875rem;font-weight: 600;letter-spacing: 0.625rem;">饮品嗨翻天</h2>
						<p style="margin-left:1.875rem;color: #333333;">老茅台低至88元起</p>
						<div style="width: 100%;height: 16rem;" class="divCenter">
							<img src="https://img13.360buyimg.com/n5/jfs/t1/11404/18/14898/165921/5ca45de8E08230989/9d9ed360de71e276.jpg"
							 style="width: 70%;" />
						</div>

					</div>

					<div style="width: 20rem;height: 40%;background: #CCCCCC;">
						<div style="width: 6.25rem;height: 2rem;border: 0.0625rem solid white;margin: 0.625rem 1.8rem;display: flex;float: left;text-align: center;color: white;"
						 class="divCenter">分类1</div>
						<div style="width: 6.25rem;height: 2rem;border: 0.0625rem solid white;margin: 0.625rem 1.8rem;display: flex;float: left;text-align: center;color: white;"
						 class="divCenter">分类1</div>
						<div style="width: 6.25rem;height: 2rem;border: 0.0625rem solid white;margin: 0.625rem 1.8rem;display: flex;float: left;text-align: center;color: white;"
						 class="divCenter">分类1</div>
						<div style="width: 6.25rem;height: 2rem;border: 0.0625rem solid white;margin: 0.625rem 1.8rem;display: flex;float: left;text-align: center;color: white;"
						 class="divCenter">分类1</div>
						<div style="width: 6.25rem;height: 2rem;border: 0.0625rem solid white;margin: 0.625rem 1.8rem;display: flex;float: left;text-align: center;color: white;"
						 class="divCenter">分类1</div>
						<div style="width: 6.25rem;height: 2rem;border: 0.0625rem solid white;margin: 0.625rem 1.8rem;display: flex;float: left;text-align: center;color: white;"
						 class="divCenter">分类1</div>
					</div>

				</div>
				<div style="width: 55rem;height: 100%;" class="divColumn">
					<div style="width: 100%;height: 18.625rem;" class="divRow">
						<div style="width: 25rem;height: 100%;background: white;" class="divColumn">
							<div style="width: 100%;height: auto;" class="divColumn">
								<h2 style="margin-left:1.875rem;margin-top: 1.875rem;font-weight: 600;letter-spacing: 0.3125rem;">饮品嗨翻天</h2>
								<p style="margin-left:1.875rem;color: #333333;">老茅台低至88元起</p>
							</div>
							<div style="width: 100%;height: 100%;" class="divRow">
								<div style="width: 8rem;" class="divColumn">
									<div style="width: 100%;height: 3.25rem;padding-left:1.875rem" class="divRow divColumnCenter">
										<h2 style="color: #007D36;">¥</h2>
										<h1 style="color: #007D36;">520.00</h1>
									</div>
									<div style="width: 100%;height: auto;padding-left:1.875rem" class="divRow divColumnCenter">
										<span style="width: 6.25rem;height: 2rem;background: #FE9900;color: white;text-align: center;line-height: 2rem;">立即购买</span>
									</div>
								</div>
								<div style="width: 17rem;" class="divCenter">
									<img src="https://img10.360buyimg.com/n7/jfs/t1/74240/13/7690/190128/5d5bc4f3E9dd31bee/682b48881bed7772.jpg" />
								</div>
							</div>
						</div>
						<div style="width: 0.25rem;height: 100%;"></div>
						<div style="width: 29.75rem;height: 100%;background: white;" class="divColumn">
							<div style="height: 2.5rem;margin: 0rem 0.625rem;" class="leftAndRight">
								<h2>今日菜价</h2>
								<span>更多>>></span>
							</div>
							<div style="width: 100%;height: 0.125rem;background: #73CD93;"></div>
							<div style="width: 100%;height:2rem;" class="divRow">
								<div style="width: 25%;height: 100%;" class="divCenter">
									<span style="color: #999999;">品名</span>
								</div>
								<div style="width: 25%;height: 100%;" class="divCenter">
									<span style="color: #999999;">分类名</span>
								</div>
								<div style="width: 25%;height: 100%;" class="divCenter">
									<span style="color: #999999;">时间</span>
								</div>
								<div style="width: 25%;height: 100%;" class="divCenter">
									<span style="color: #999999;">价格</span>
								</div>
							</div>
							<div style="width: 100%;height: 0.0625rem;background: #F0F0F0;"></div>
							<div style="width: 100%;height: 13.75rem;overflow: hidden;" :id="item.id1">
								<ul :id="item.id2" style="margin-left: 0rem;">
									<li v-for="(item,index) in priceList">
										<div style="width: 100%;height:2rem;color: #999999;font-size: 0.875rem;" class="divRow">
											<div style="width: 25%;height: 100%;" class="divCenter">
												<span v-html="item.name"></span>
											</div>
											<div style="width: 25%;height: 100%;" class="divCenter">
												<span v-html="item.sort"></span>
											</div>
											<div style="width: 25%;height: 100%;" class="divCenter">
												<span v-html="item.time"></span>
											</div>
											<div style="width: 25%;height: 100%;color: gold;" class="divCenter">
												<span v-html="item.price"></span>
											</div>
										</div>
									</li>
								</ul>
								<ul :id="item.id3"></ul>
							</div>

						</div>

					</div>
					<div style="height: 0.25rem;width: 100%;"></div>
					<div style="width: 100%;height: 18.625rem;" class="divRow">
						<div style="width: 25rem;height: 100%;background: white;" class="divColumn">
							<div style="width: 100%;height: auto;" class="divColumn">
								<h2 style="margin-left:1.875rem;margin-top: 1.875rem;font-weight: 600;letter-spacing: 0.3125rem;">饮品嗨翻天</h2>
								<p style="margin-left:1.875rem;color: #333333;">老茅台低至88元起</p>
							</div>
							<div style="width: 100%;height: 100%;" class="divRow">
								<div style="width: 8rem;" class="divColumn">
									<div style="width: 100%;height: 3.25rem;padding-left:1.875rem" class="divRow divColumnCenter">
										<h2 style="color: #007D36;">¥</h2>
										<h1 style="color: #007D36;">520.00</h1>
									</div>
									<div style="width: 100%;height: auto;padding-left:1.875rem" class="divRow divColumnCenter">
										<span style="width: 6.25rem;height: 2rem;background: #FE9900;color: white;text-align: center;line-height: 2rem;">立即购买</span>
									</div>
								</div>
								<div style="width: 17rem;" class="divCenter">
									<img src="https://img14.360buyimg.com/n1/s150x150_jfs/t1/33247/25/15715/211538/5d2301f6E7115a041/7c308d9ae767a814.jpg" />
								</div>
							</div>
						</div>
						<div style="width: 0.25rem;height: 100%;"></div>
						<div style="width: 29.75rem;height: 100%;" class="divColumn">
							<div style="width: 100%;height: 12.00rem;" class="divRow">
								<div style="width: 14.875rem;height: 100%;background: white;" class="divRow">
									<div style="width: 50%;height: 100%;margin: 0.625rem 0rem 0.625rem 0.625rem;position: relative;" class="divColumn">
										<h3>舌尖上的蔬菜之一桑植</h3>
										<span style="color: #999999;line-height: 0.875rem;">祁东县黄花菜基地出产</span>
										<div style="position: absolute;bottom: 3.125rem;" class="divColumn">
											<div class="divRow">
												<h4 style="color: #007D36;">¥</h4>
												<h3 style="color: #007D36;">520.00</h3>
											</div>
										</div>

										<div style="position: absolute;bottom: 1.25rem;background: #FE9900;height: 1.625rem;width: 5rem;text-align: center;color: white;line-height: 1.625rem;">
											立即购买
										</div>
									</div>
									<div style="width: 50%;height: 100%;position: relative;">
										<img style="position: absolute;bottom: 0rem;left: 0rem;right: 0rem;width: 100%;" src="https://img12.360buyimg.com/n7/jfs/t1/56125/34/507/261360/5cdccce6Ea727fa03/8361763810dc62c9.jpg" />
									</div>


								</div>
								<div style="width: 0.25rem;height: 100%;"></div>
								<div style="width: 14.875rem;height: 100%;background: white;" class="divRow">
									<div style="width: 50%;height: 100%;margin: 0.625rem 0rem 0.625rem 0.625rem;position: relative;" class="divColumn">
										<h3>舌尖上的蔬菜之一桑植</h3>
										<span style="color: #999999;line-height: 0.875rem;">祁东县黄花菜基地出产</span>

										<div style="position: absolute;bottom: 3.125rem;" class="divColumn">
											<div class="divRow">
												<h4 style="color: #007D36;">¥</h4>
												<h3 style="color: #007D36;">520.00</h3>
											</div>
										</div>

										<div style="position: absolute;bottom: 1.25rem;background: #FE9900;height: 1.625rem;width: 5rem;text-align: center;color: white;line-height: 1.625rem;">
											立即购买
										</div>
									</div>
									<div style="width: 50%;height: 100%;position: relative;">
										<img style="position: absolute;bottom: 0rem;left: 0rem;right: 0rem;width: 100%;" src="https://img14.360buyimg.com/n7/jfs/t16951/182/1016406382/134233/be47d926/5ab8cdf4N252473d2.jpg" />
									</div>


								</div>

							</div>
							<div style="height: 0.25rem;width: 100%;"></div>
							<div style="width: 100%;height: 12.0rem;" class="divRow">
								<div style="width: 14.875rem;height: 100%;background: white;" class="divRow">
									<div style="width: 50%;height: 100%;margin: 0.625rem 0rem 0.625rem 0.625rem;position: relative;" class="divColumn">
										<h3>舌尖上的蔬菜之一桑植</h3>
										<span style="color: #999999;line-height: 0.875rem;">祁东县黄花菜基地出产</span>

										<div style="position: absolute;bottom: 3.125rem;" class="divColumn">
											<div class="divRow">
												<h4 style="color: #007D36;">¥</h4>
												<h3 style="color: #007D36;">520.00</h3>
											</div>
										</div>

										<div style="position: absolute;bottom: 1.25rem;background: #FE9900;height: 1.625rem;width: 5rem;text-align: center;color: white;line-height: 1.625rem;">
											立即购买
										</div>
									</div>
									<div style="width: 50%;height: 100%;position: relative;">
										<img style="position: absolute;bottom: 0rem;left: 0rem;right: 0rem;width: 100%;" src="https://img11.360buyimg.com/n7/jfs/t23599/33/1023857972/481446/25bbc64b/5b4aaa8aNbf0240d3.jpg" />
									</div>


								</div>
								<div style="width: 0.25rem;height: 100%;"></div>
								<div style="width: 14.875rem;height: 100%;background: white;" class="divRow">
									<div style="width: 50%;height: 100%;margin: 0.625rem 0rem 0.625rem 0.625rem;position: relative;" class="divColumn">
										<h3>舌尖上的蔬菜之一桑植</h3>
										<span style="color: #999999;line-height: 0.875rem;">祁东县黄花菜基地出产</span>

										<div style="position: absolute;bottom: 3.125rem;" class="divColumn">
											<div class="divRow">
												<h4 style="color: #007D36;">¥</h4>
												<h3 style="color: #007D36;">520.00</h3>
											</div>
										</div>

										<div style="position: absolute;bottom: 1.25rem;background: #FE9900;height: 1.625rem;width: 5rem;text-align: center;color: white;line-height: 1.625rem;">
											立即购买
										</div>
									</div>
									<div style="width: 50%;height: 100%;position: relative;">
										<img style="position: absolute;bottom: 0rem;left: 0rem;right: 0rem;width: 100%;" src="https://img11.360buyimg.com/n7/jfs/t1/43825/35/12583/243612/5d5bc554Ec2676e4f/3a623b11d7672c13.jpg" />
									</div>

								</div>
							</div>
						</div>

					</div>

				</div>

			</div>
		</div>

		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery.flexslider.js"></script>
		<script src="js/cloud-zoom.js"></script>
		<script>
			var sort = new Vue({
				el: '#sort',
				data: {
					sortList: [{
						name: '干货'
					}, {
						name: '茶叶'
					}, {
						name: '饮品'
					}, {
						name: '腊味类'
					}, {
						name: '日用品'
					}, {
						name: '酒庄业'
					}, {
						name: '粮油米面'
					}, {
						name: '茶具 餐具'
					}],
					isShow: false,
					secondSort: []

				},
				created: function() {
					var _this = this;

				},
				methods: {
					enter(index) {

						sort.isShow = true;
						sort.secondSort = [];
						for (var i = 0; i < 25; i++) {
							sort.secondSort.push(sort.sortList[index].name);
						}
					},
					leave(index) {

					},
					leaveUl() {
						sort.isShow = false;
					},
					leaveSort() {
						sort.isShow = false;
					},
					enterSort() {
						sort.isShow = true;
					}





				}
			});

			var recommend = new Vue({
				el: '#boxdiv',
				data: {
					itemList: ['https://img11.360buyimg.com/n7/jfs/t1/52213/13/2695/226242/5d079dd9Eb5765802/4728f5bd76807cb5.jpg',
						'https://img12.360buyimg.com/n7/jfs/t4141/69/351575720/323555/ccd9008/58b3c601Na4f13da4.jpg',
						'https://img13.360buyimg.com/n7/jfs/t1/50506/26/6196/217249/5d40dae1E0902a054/24f83ab5f504c727.jpg',
						'https://img11.360buyimg.com/n7/jfs/t1/43676/40/7226/198945/5d0deb14Ea68b84ec/ab4ae21644e2c568.jpg',
						'https://img13.360buyimg.com/n7/jfs/t22726/208/2218406097/453174/e6d7f3cc/5b78bf5dN2ba5660e.jpg',
						'https://img11.360buyimg.com/n7/jfs/t1/23605/8/14942/371084/5cac5f0bE5c625640/d91e5ae1af03e4b2.jpg',
						'https://img12.360buyimg.com/n7/jfs/t18910/185/1403659361/253704/ece62066/5ac74859Nd2ba4167.jpg',
						'https://img13.360buyimg.com/n7/jfs/t1/47883/22/7335/211774/5d4fddd0Ebf331db4/82a67e1812486998.jpg',
						'https://img12.360buyimg.com/n7/jfs/t1/39642/13/8684/779764/5d00ab25E613ba2d6/9aa445863e0f9b96.png',
						'https://img13.360buyimg.com/n7/jfs/t5719/115/7116346600/113182/33686e76/596ea898N45e022d0.jpg'
					]


				}
			});
			var floorGood = new Vue({
				el: '#floorGood',
				data: {
					floorList: [{
						id1: 'review_box1',
						id2: 'commentO_1',
						id3: 'commentT_1'
					}, {
						id1: 'review_box2',
						id2: 'commentO_2',
						id3: 'commentT_2'
					}],
					priceList: [{
							name: '红酒',
							sort: '酒',
							time: '04：30',
							price: '¥1200'
						},
						{
							name: '猪头肉',
							sort: '猪肉',
							time: '04：30',
							price: '¥30'
						},
						{
							name: '螃蟹',
							sort: '海鲜',
							time: '09：30',
							price: '¥90'
						},
						{
							name: '猪头肉',
							sort: '猪肉',
							time: '04：30',
							price: '¥30'
						},
						{
							name: '红酒',
							sort: '酒',
							time: '04：30',
							price: '¥1200'
						},


					]

				},
				created: function() {




				},
				mounted: function() {

					var _this = this;
					for (var i = 0; i < 1; i++) {
						var id1 = _this.floorList[i].id2;
						var id2 = _this.floorList[i].id3;
						var id3 = _this.floorList[i].id1;
						console.log(id3)
						window.onload = roll(50);

						function roll(t) {
							var ul1 = document.getElementById(id1);
							var ul2 = document.getElementById(id2);
							var ulbox = document.getElementById(id3);
							console.log(ulbox)
							ul2.innerHTML = ul1.innerHTML;
							ulbox.scrollTop = 0; // 开始无滚动时设为0
							var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
							// 鼠标移入div时暂停滚动
							ulbox.onmouseover = function() {
								clearInterval(timer);
							}
							// 鼠标移出div后继续滚动
							ulbox.onmouseout = function() {
								timer = setInterval(rollStart, t);
							}
						}

						// 开始滚动函数
						function rollStart() {
							// 上面声明的DOM对象为局部对象需要再次声明
							var ul1 = document.getElementById(id1);
							var ul2 = document.getElementById(id2);
							var ulbox = document.getElementById(id3);
							// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
							if (ulbox.scrollTop >= ul1.scrollHeight) {
								ulbox.scrollTop = 0;
							} else {
								if (ulbox.scrollTop >= 100) {
									ulbox.scrollTop = 0;
								} else {
									ulbox.scrollTop++;
								}
							}
						}
					}
				},
				beforeMount: function() {




				},

			});
		</script>
		<script type="text/javascript">
			$(document).ready(function() {
				new ZouMa().Start();
			});

			function ZouMa() {
				this.maxLength = 3; //最低显示数           
				this.Timer = 2000; //计时器间隔时间
				this.Ul = $(".box ul");

				var handId; //计时器id
				var self = this;
				this.Start = function() {
					if (self.Ul.children().length < this.maxLength) {
						self.Ul.append(self.Ul.children().clone());
					}
					handId = setInterval(self.Play, self.Timer);
				}
				this.Play = function() {
					var img = self.Ul.children().eq(0);
					var left = img.children().eq(0).width();
					img.animate({
						"marginLeft": (-1 * left) + "px"
					}, 600, function() {
						//appendTo函数是实现走马灯一直不间断播放的秘诀。
						//目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
						$(this).css("margin-left", "auto").appendTo(self.Ul);
					});
				}
			}
		</script>
		<script>

		</script>

	</body>
</html>
